<template>
  <input type="text" :value="inputValue" @input="handleInput" @blur="handleBlur">
</template>
<script>
export default {
  name: "zInput",
  props: {
    value: { type: String, default: "", required: true },
    name: { type: String }
  },
  data() {
    return {
      inputValue: this.value
    };
  },
  methods: {
    handleInput(e) {
      const value = e.target.value;
      this.inputValue = value;
      this.$emit("input", value);
      this.$bus.$emit("zFormItem", { value, name: this.name });
    },
    handleBlur() {
      const value = this.inputValue;
      this.$bus.$emit("zFormItem", { value, name: this.name });
    }
  }
};
</script>
<style scoped>
</style>
